<template>
  <div class="broad-cast" v-if="broadVisible">
    <img src="@/assets/image/broadIcon.png" class="broad-icon" />
    <div class="broad-text">{{ broadText }}</div>
  </div>
</template>

<script>
import { getNotice } from '@/api/index';

export default {
  data() {
    return {
      broadText: '',
      broadSwitch: false,
    };
  },
  created() {
    this.initData();
  },
  computed: {
    broadVisible() {
      return this.broadText && this.broadSwitch;
    },
  },
  methods: {
    async initData() {
      try {
        const res = await getNotice(); // res.data.resData: {messageContents,hiddenFlag}
        console.log('广播>>>', res);
        this.broadText = res.data.resData.messageContents;
        this.broadSwitch = res.data.resData.hiddenFlag === '1';
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.broad-cast {
  display: flex;
  align-items: center;
  justify-content: center;
  .broad-icon {
    width: 28px;
    height: 28px;
    margin-right: 20px;
  }

  .broad-text {
    color: #969799;
    font-size: 28px;
    max-width: 550px;
    line-height: 40px;
  }
}
</style>
